<template>
	<view>
		<view class="card">
			<view class="order-title">
				<text>订单编号：{{orderBase.orderSn}}</text>
				
			</view>
			<view class="goods">
				<image :src="orderInfo.productPic" mode=""></image>
				<view class="info"  >
					<view class="fir">
						<text>{{orderInfo.productName}}</text>
						<text>￥{{orderInfo.totalPrice}}</text>
					</view>
					<view class="sec">
						<text>编号{{orderInfo.productSkuId}}</text>
						<text>x{{orderInfo.productQuantity}}</text>
					</view>
					<view class="thr" >
						规格：
						<text v-for="item in JSON.parse(orderInfo.productAttr)">{{item.key}}:{{item.value}}</text>
					</view>
					
				</view>
			
			</view>
			<view class="total">
			
				<text>合计：￥ {{orderBase.payAmount}} 元</text>
			</view>
			
		</view>
	<view class="item">
		<view class="title">
			请选择退单数量：
		</view>
		<text>{{orderInfo.productQuantity}}</text>
	</view>
	<view class="item">
		<view class="title">
			请输入退货原因：
		</view>
		<input type="text" value=""  placeholder="请输入退货原因" v-model="reason"/>
	</view>
	<view class="item">
		<view class="title">
			请选择退货地址：
		</view>
		<picker mode="selector" :range="addressList" @change="addchange" value="index">
			<view>{{addressList[index]}}</view>
		</picker>
	</view>
	<view class="item">
		<view class="title">
			请输入问题描述：
		</view>
		<textarea value="" placeholder="请输入问题描述" maxlength="140" v-model="description"/>
	</view>
	<view class="item">
		<view class="title" style="font-weight: 700;">
			温馨提醒：
			<view class="desc">
				上传图片总大小不能超过3m，单个文件大小不能超过1m，图片总个数不能超过3张
			</view>
			<view class="uploadImg">
				
			
			<view class="upload" @tap="uploadImg">
				<image src="../../../static/icons/jia.png" mode=""></image>
				<view class="">
				
				</view>
			</view>
			<view class="imgList">
				<view class="" v-for="(item,index) in imgList">
					<image :src="item" mode=""></image>
				</view>
			</view>
			</view>
		</view>
		
	</view>
	<view class="item">
		<button type="default" @tap="replay">申请退货</button>
	</view>
	</view>
</template>

<script>
	import{getOrderId,getCompanyAddrss,addOrderReturnApply} from "../../../utils/goodsInfo/addCar/order/index.js"
	export default {
		data() {
			return {
				orderId:'',
				orderBase:{},
				orderItems:[],
				skuId:"",
				orderInfo:{},
				addressList:[],
				index:0,
				addressName:'',
				addressList:[],
				reason:'',
				description:'',
				imgList:[],
				proofPics:'',
				count:'',
				companyAddressId:'',
				orderItemId:''
			}
		},
		methods: {
			init(){
				getOrderId(this.orderId).then(res=>{
					console.log(res)
					this.orderItems=res.data.orderItems
					this.orderBase=res.data.orderBase
					this.orderItem=this.orderItems.forEach(el=>{
						if(el.id==this.skuId){
							this.orderInfo=el
							this.count=this.orderInfo.productQuantity
							this.orderItemId=this.orderInfo.id
						}
					})
					console.log(this.orderInfo)
					
				})
				getCompanyAddrss().then(res=>{
					console.log(res)
					this.addressList=res.data.items.map(el=>el.addressName)
					this.addressInfo=res.data.items
				})
			},
			addchange(e){
				// console.log(e)
				 this.index = e.detail.value
				 this.addressName=this.addressList[this.index]
				 console.log(this.addressName)
				var item= this.addressInfo.find(el=>el.addressName==this.addressName)
				 console.log(item)
				 this.companyAddressId=item.id
			},
			uploadImg(){
				let _self = this;
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success: (chooseImageRes) => {
							// console.log(chooseImageRes);
							const tempFilePaths = chooseImageRes.tempFilePaths;
							// console.log(tempFilePaths[0]);
							_self.IMGS = tempFilePaths[0];
							uni.showLoading({
								title:'正在上传'
							});
							const uploadTask = uni.uploadFile({
								url: 'http://leju.bufan.cloud/lejuClient/login/uploadAvatar',
								filePath: tempFilePaths[0],
								name: 'file',
								formData: {
									"user":'test'
								},
								success: (res) => {
									var item=(JSON.parse(res.data)).data.fileUrl;
									this.imgList.push(item)
									console.log(this.imgList)
									console.log((JSON.parse(res.data)).data.fileUrl);
									this.proofPics=(JSON.parse(res.data)).data.fileUrl
									uni.hideLoading();
									uni.showToast({
										title:'上传成功',
										icon:'none',
										duration:2000
									});
									// uni.setStorageSync('ava', (JSON.parse(res.data)).data.fileUrl);
								},
								fail: (error) => {
									console.log('失败原因',error);
								}
							});
						}
					});
			},
			replay(){
				console.log( this.proofPics)
				addOrderReturnApply({
					"companyAddressId": this.companyAddressId,
					  "count": this.count,
					  "description": this.description,
					  "orderId": this.orderId,
					  "orderItemId": this.orderItemId,
					  "proofPics": this.proofPics,
					  "reason": this.reason
				}).then(res=>{
					console.log(res)
					if(res.success){
						uni.navigateBack({
							
						})
					}
				})
			}
			
		},
		onLoad(options){
			this.orderId=options.id
			this.skuId=options.skuId
			this.init()
			
		}
	}
</script>

<style scoped lang="scss">
.card{
			width: 672rpx;
		    box-sizing: border-box;
		    padding: 36rpx;
		    border-radius: 24rpx;
		    background-color: #fff;
		    margin: 30rpx auto;
		    font-size: 24rpx;
		    color: #3e3e3e;
	.order-title{
			display: flex;
		   
		    justify-content: space-between;
		    border-bottom: 2rpx solid #f1ece7;
		    padding-bottom: 30rpx;
	}
	.goods{
			display: flex;
			justify-content: flex-start;
		    border-bottom: 2rpx solid #f1ece7;
		    padding: 30rpx 0;
			image{
				width: 162rpx;
				height: 162rpx;
				background-color: #8f8f94;
			}
			.info{
				width: 470rpx;
				 margin-left: 28rpx;
				 .fir{
					 font-size: 26rpx;
					  line-height: 74rpx;
					  color: #3e3e3e;
				 }.fir,.sec{
					 display: flex;
					 justify-content: space-between;
					 align-items: center;
				 }
				 .sec,.thr{
						font-size: 22rpx;
					     color: #8d8d8d;
					     line-height: 30rpx;
					     margin-top: 4rpx;
				 }
				 .four{
						text-align: right;
					     margin-top: 10rpx;
					     color: #8d8d8d;
					     text-decoration: underline;
				 }
			}
	}
	.total{
			font-size: 26rpx;
		    line-height: 36rpx;
		    text-align: right;
		    margin-top: 14rpx;
		    display: -webkit-box;
		    display: -webkit-flex;
		    display: flex;
		    justify-content: flex-end;
	}
	
	}
	.item{
		width: 83%;
		margin: 0 auto;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		font-size: 24rpx;
		padding: 30rpx;
		background: #fff;
		border-bottom: 2rpx solid #f1ece7;
		padding: 36rpx;
	
		
		.title{
			font-size: 24rpx;
		}
		input{
			font-size: 24rpx;
			text-align: right;
		}
		textarea{
			width: 360rpx;
			height: 300rpx;
			resize: none;
			    background: none;
			    color: inherit;
			    opacity: 1;
			    font: inherit;
			    line-height: inherit;
			    letter-spacing: inherit;
			    text-align: inherit;
			    text-indent: inherit;
			    text-transform: inherit;
			    text-shadow: inherit;
		}
		.upload{
			margin-top: 30rpx;
			width: 120rpx;
			height: 120rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			font-weight: 400!important;
			image{
				width: 60rpx;
				height: 60rpx;
			}
		}
		.desc{
			font-size: 24rpx;
			font-weight: 400!important;
		}
		}
.uploadImg{
	width: 100%;
	display: flex;
	justify-content: space-between;
	.imgList{
		display: flex;
		align-items: center;
		justify-content: space-between;
		image{
			width: 140rpx;
			height: 140rpx;
		}
	}
}
	
</style>
